<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="number"/>
    <hr/>
    <input v-model="stu.id"/>
    <input v-model="stu.name"/>
    <hr/>
    {{content}}
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                number: 1,
                stu: {
                    id: 1,
                    name: 'admin'
                },
                content: ''
            }
        },
        watch: {
            number: function (newVal, oldVal) {
                this.content = '修改了number的值，oldVal:' + oldVal + '，newVal:' + newVal
            },
            stu: {
                deep: true,
                handler: function (newObj) {
                    this.content = '修改了student的值，id:' + newObj.id + '，name:' + newObj.name
                }
            }
        }
    })
</script>